<template>
  <view>
    <view class="list-item" v-for="(v, i) in carList" :key="i">
      <radio :checked="v.state" @click="switchCarState(v)" />
      <image :src="v.image" mode=""></image>
      <view class="right">
        <text>{{v.title}}</text>
        <view class="count">
          <button type="primary" size="mini" @click="subCar(v)" :disabled="v.count === 1">-</button>
          <text>{{v.count}}</text>
          <button type="primary" size="mini" @click="addCar(v)">+</button>
        </view>
        <text>￥：{{v.price}}</text>
      </view>
    </view>
    <view class="">
      <label class="radio">
        <radio :checked="totalState" @click="switchCarAllState(!totalState)" /><text>全选</text>
      </label>
      <text>总价钱： {{totalPrice}}</text>
      <button @click="deleteCarByState">选中删除</button>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  import mixin from '../../mixins/index.js'
  export default {
    mixins: [mixin],
    computed: {
      ...mapState('car', ['carList']),
      ...mapGetters('car', ['totalState', 'totalPrice', 'totalCount'])
    },

    data() {
      return {

      }
    },
    methods: {
      ...mapMutations('car', ['addCar', 'subCar', 'switchCarState', 'switchCarAllState', 'deleteCarByState'])
    }
  }
</script>

<style lang="scss">
  .list-item {
    display: flex;

    image {
      width: 180px;
      height: 120px;
      flex-shrink: 0;
    }

    .right {
      margin-left: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
</style>
